<template>
  <div>
    <el-card
      shadow="naver"
      v-for="(item, index) in userSelectors"
      :key="index"
      style="margin-top: 10px"
      class="user-card"
    >
      <el-button
        @click="delUserSelector(userSelectors, index)"
        type="text"
        size="small"
        icon="Close"
        >移除</el-button
      >
      <br />

      <SelectorUser
        :user-selector="item"
        :index="index"
        :show-users="false"
        :show-label="false"
        @change="userSelectionsOkHandler"
      ></SelectorUser>

      <el-input
        size="mini"
        v-model="item.parameter"
        placeholder="参数"
      ></el-input>

      <el-radio-group size="mini" v-model="item.handleType">
        <el-radio :label="0">审批</el-radio>
        <el-radio :label="1">抄送</el-radio>
      </el-radio-group>
      <el-input
        size="mini"
        v-model="item.description"
        placeholder="描述"
      ></el-input>
    </el-card>
  </div>
</template>

<script>
import { useWorkflowDesignStore } from "@/stores/workflowDesign";
import SelectorUser from "../FlowProcesses/SelectorUser.vue";

export default {
  components: { SelectorUser },
  props: {
    userSelectors: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  filters: {
    getSelectionsName(selections) {
      if (!selections) return "";
      var names = [];
      selections.forEach((s) => {
        names.push(s.name);
      });
      return names.join(",");
    },
  },
  data() {
    return {
      allUserSelectors: [],
    };
  },
  watch: {
    userSelectors: {
      deep: true,
      handler() {
        this.compatibleOldName();
      },
    },
  },
  mounted() {
    this.loadUserSelectors();
  },
  methods: {
    loadUserSelectors() {
      useWorkflowDesignStore()
        .getAllUserSelectors()
        .then((res) => {
          // console.log(res);
          this.allUserSelectors = res;
          this.compatibleOldName();
        });
    },

    delUserSelector(conditions, index) {
      conditions.splice(index, 1);
    },
    userSelectionsOkHandler(value) {
      var item = this.userSelectors[value.index];
      item.selectorId = value.selector.selectorId;
      item.selections = [];
      value.selector.selections.forEach((selection) => {
        item.selections.push({
          id: selection.id,
          name: selection.name,
        });
      });
    },
    getUserSeletorDescription(id) {
      var selectors = this.allUserSelectors.filter((c) => c.id == id);
      return selectors.length == 0 ? "" : selectors[0].description;
    },
    selectorChange(item) {
      item.selections = [];
    },
    compatibleOldName() {
      //为了兼容回显旧的插件名称，只能回显，不能选择，需要编辑选择新的
      var inputSelectorIds = this.userSelectors
        .map((c) => c.selectorId)
        .filter((id) => id.length > 0 && id.split(":").length == 1);

      this.allUserSelectors
        .filter(
          (r) =>
            inputSelectorIds.filter((id) => r.id.indexOf(id + ":") >= 0)
              .length > 0
        )
        .forEach((r) => {
          var oldSelector = JSON.parse(JSON.stringify(r));
          oldSelector.id = oldSelector.id.split(":")[0];
          if (
            this.allUserSelectors.filter((s) => s.id == oldSelector.id)
              .length == 0
          ) {
            oldSelector.name += "[回显兼容]";
            oldSelector.disabled = true;
            this.allUserSelectors.push(oldSelector);
          }
        });
    },
  },
};
</script>

<style>
/* .user-card .el-card__body{
  padding: 10px;
} */
</style>
